export const getRemBase = () => {
  const { clientWidth } = document.documentElement;
  let fontSize = 0;
  const baseRem = 0.25 / 4;

  const widthMap = [
    { width: 3800, size: 0.505 },
    { width: 2500, size: 0.335 },
    { width: 1900, size: 0.25 },
    { width: 1500, size: 0.23 },
    { width: 1280, size: 0.21 },
    { width: 1000, size: 0.1575 }
  ];
  fontSize = widthMap.find(({ width }) => clientWidth >= width)?.size || 0.1575;
  return fontSize / baseRem / 4;
};

/**
 * 将px转换为rem比例的值
 * @param originVal 原始值
 * @returns 转换后的值
 */
export const px2RemValue = (originVal?: number) => {
  const base = getRemBase();
  return originVal ? originVal * base : 0;
};

/**
 * 将px按照Base Font-Size = 4px进行换算
 * @param originVal 转换前的值, 支持字符串单个值或者上右下左值
 * @returns 转换rem后的值
 */
export const px2Rem = (originVal?: string) => {
  const list = originVal?.split(' ') || [];
  return list
    .map((px) => {
      const val = Number(px.replace('px', '')) || 0;
      // font base 4px
      const remValue = val / 4;
      return remValue > 0 ? remValue + 'rem' : remValue;
    })
    .join(' ');
};
